<template>
  <div class="event-p">
    <div class="left">
        <span>管控状态</span>   
        <span style="color:#5C88F7">{{returnWord1(md_processing_Status.code,statusList)}}</span> 
    </div>
    <div class="mid">
        <table v-if="md_processing_Status.code&&md_processing_Status.code=='delay'">
            <thead>
                <tr>
                    <!-- <th>Work Order</th> -->
                    <th>推迟至</th>
                    <th  width="20%">AHM Benefit</th>
                    <th  width="30%">推迟原因</th>
                    <th  width="30%">后续计划</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- <td>{{md_processing_Status.eventDealItem.workOrder}}</td> -->
                    <td>{{md_processing_Status.eventDealItem.delayTo}}</td>
                    <td>{{md_processing_Status.eventDealItem.ahmBenefit}}</td>
                    <td>{{md_processing_Status.eventDealItem.delayReason}}</td>
                    <td>{{md_processing_Status.eventDealItem.nextPlan}}</td>
                </tr>
            </tbody>
        </table>
        <table  v-if="md_processing_Status.code&&md_processing_Status.code=='monitor'">
            <thead>
                <tr>
                    <th>监控期</th>
                    <th  width="40%">AHM Benefit</th>
                    <th  width="40%" v-if="md_processing_Status.eventDealItem.monitoringType&&md_processing_Status.eventDealItem.monitoringType=='str'">串件观察</th>
                    <th  width="40%" v-if="md_processing_Status.eventDealItem.monitoringType&&md_processing_Status.eventDealItem.monitoringType=='transaction'">办理保留</th>
                </tr>
            </thead>
              <tbody>
                <tr>
                    <td>{{md_processing_Status.eventDealItem.flugTag}}飞行日<span>或{{md_processing_Status.eventDealItem.leg}}航段</span></td>
                    <td>{{md_processing_Status.eventDealItem.ahmBenefit}}</td>
                    <td v-if="md_processing_Status.eventDealItem.monitoringType&&md_processing_Status.eventDealItem.monitoringType=='str'">{{md_processing_Status.eventDealItem.ariplane}} <span> </span>{{md_processing_Status.eventDealItem.flightNo}}</td>
                    <td  v-if="md_processing_Status.eventDealItem.monitoringType&&md_processing_Status.eventDealItem.monitoringType=='transaction'">
                        {{md_processing_Status.eventDealItem.orderNoPre}} ：{{md_processing_Status.eventDealItem.orderNoContent}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="right">
        <a-button type="link" @click="visible=true" v-if="Object.keys(md_processing_Status).length>0&&(md_processing_Status.code =='open'||md_processing_Status.code =='processing'||md_processing_Status.code =='delay')">编辑状态</a-button>
    </div>
    <a-modal :z-index="2200" v-model="visible" title="请您选择所处的状态"  :destroyOnClose="true" centered   @ok="handleOk">
        <a-select @change="change" placeholder="请选择状态" v-if="md_processing_Status.code =='open'">
          <a-select-option  value="processing">处理中</a-select-option>
          <a-select-option  value="delay">推迟</a-select-option>
          <a-select-option  value="monitor">监控</a-select-option>
        </a-select>
        <a-select @change="change" placeholder="请选择状态" v-if="md_processing_Status.code =='processing'">
          <a-select-option  value="update">更新</a-select-option>
          <a-select-option  value="close">关闭</a-select-option>
          <a-select-option  value="delay">推迟</a-select-option>
        </a-select>
         <a-select @change="change" placeholder="请选择状态" v-if="md_processing_Status.code =='delay'">
          <a-select-option  value="update">更新</a-select-option>
          <a-select-option  value="processing">处理中</a-select-option>
          <a-select-option  value="close">关闭</a-select-option>
        </a-select>
    </a-modal>
  </div>
</template>

<script>
import { getEventsStatusApi } from '@/services/fraMonitoring'
export default {
    props:{
        md_processing_Status:Object
    },
    name:'eventProcessing',
    data(){
        return {  
            visible:false,
            status:'',
            statusList:[]
        }
    },
    methods:{
        handleOk(){
            let s = this.returnWord(this.status,this.statusList)
            this.$emit('corStatus',s)
            this.status= ''
            this.visible = false
        },
        change(p){
           this.status = p
        },

        returnWord1(str,arr){
        const temp = arr.find(v=>v.statusCode == str)
            if(temp){
                return temp.statuName
            }else{
                return ''
            }
        },
        returnWord(str,arr){
        const temp = arr.find(v=>v.statusCode == str)
            if(temp){
                return temp.statusCode
            }else{
                return ''
            }
        }
    },
    created(){
       getEventsStatusApi().then(res=>{
        if(res.code == 200){
            this.statusList = res.data
        }
       })
    }
}
</script>

<style  lang="less">
      div.ant-select-dropdown.ant-select-dropdown--single  {
        z-index: 2700 !important;
    }
</style>
<style lang="less" scoped>

.event-p{
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    .left{
        display: flex;
        flex-direction: column;
    }
    .mid{
        flex: 1;
        padding: 0 20px;
        table{
            width: 100%;
        }
    }
}
</style>